<template>
  <div class="Users">
    <div>
      <!-- 搜索以及确定按钮 -->
      <addUserSub
        @addUser-to="dialogVisible = true"
        @search-userIofo="userDataList"
      />
    </div>
    <!-- 表格 -->
    <userTable
      :table-data="tableData"
      :number-of-entries="numberOfEntries"
      @hand-size="handSize"
      @hand-current="handCurrent"
      @handle-edit="handleEdit"
      @delete-User="userDataList()"
    />
    <!-- 添加用户弹出层弹 -->
    <SpringFrame
      v-if="dialogVisible"
      ref="empty"
      v-model="dialogVisible"
      :modify-data="modifyData"
      @determine-add="determineAdd"
      @clickId="modifyData={},userDataList()"
    />
  </div>
</template>

<script>
// 搜索框和确定按钮
import addUserSub from '../components/addUserSub'
// 表单
import userTable from '../components/userTable'
// 弹出
import SpringFrame from '../components/springFrame'
import { getUserDataList, postUserAdd } from '@/api/Support.js'
export default {
  name: 'Users',
  components: {
    addUserSub,
    userTable,
    SpringFrame
  },
  data() {
    return {
      // 渲染的数据
      tableData: [],
      // 当前页
      currentPage: 1,
      // 每页面条目个数
      numberOfEntries: 2,
      // 弹出层
      dialogVisible: false,
      // 存修改的数据
      modifyData: {}
    }
  },
  // 侦听
  watch: {

  },

  created() {
    this.userDataList()
  },
  methods: {
    // // 获取每页面条数
    handSize(val) {
      this.numberOfEntries = val
      this.userDataList()
    },
    // // 获取当前页
    handCurrent(val) {
      this.currentPage = val
      this.userDataList()
    },
    // 获取用户数据列表
    async userDataList(e) {
      // query查询参数 pagenum当前页码  pagesize每页显示条数
      const res = await getUserDataList({
        query: e,
        pagenum: this.currentPage,
        pagesize: this.numberOfEntries
      })
      this.tableData = res
      // this.tableData = res.users
      // this.totalNumber = res.total
      // this.currentPage = res.pagenum
      console.log(res)
    },
    // 添加用户
    async determineAdd(e) {
      console.log(e)
      try {
        const res = await postUserAdd(e)
        if (res.status === 400) return
        this.$message.success('恭喜你，添加用户成功')
        console.log(res)
        this.userDataList()
        await this.$refs.empty.ondelS()
        this.modifyData = {}
      } catch (err) {
        console.log(err)
      }
    },
    // 修改页面
    handleEdit(modify) {
      this.dialogVisible = true
      console.log(modify.id)
      this.modifyData = modify
      console.log(this.modifyData)
    }
  }
}
</script>

<style scoped lang='scss'>
.Users {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;

  .block {
    margin-top: 16px;
  }
}
</style>
